<template>
    <view class="WrapperBox">
        <view class="row j-sb a-center" v-if="pageData.title">
            <text class="black size30 bold">{{ pageData.title }}</text>
            <view class="d-flex a-center color" @click.stop="toMore">
                <text class="size30">更多</text>
                <view class="iconfont icon-a-zujian32 size22 m-left10"></view>
            </view>
        </view>
        <scroll-view scroll-x="true" class="scrollView nowrap" v-if="pageData.type == 1">
            <view class="List" v-for="(item, index) in listData" :key="index">
                <view class="chanBOX">
                    <channel-video class="channelVideo" :feed-token="item.feed_token" :promoterShareLink="item.promoter_share_link" object-fit="cover"></channel-video>
                </view>
                <view class="contents">{{ item.product_name }}</view>
                <view class="priceBox">
                    <text class="color size28 bold500" v-if="item.product_mini_price">￥{{ item.product_mini_price }}</text>
                    <text class="color size24 m-left10" v-if="item.profitTitle">{{ item.profitTitle }}</text>
                </view>
            </view>
        </scroll-view>
        <scroll-view scroll-x="true" class="scrollView nowrap" v-if="pageData.type == 2">
            <view class="List" v-for="(item, index) in listData" :key="index">
                <view class="chanBOX">
                    <channel-live class="channelVideo" :feed-id="item.export_id" :promoterShareLink="item.promoter_share_link" object-fit="cover"></channel-live>
                </view>
                <view class="contents">{{ item.description }}</view>
                <view class="priceBox d-flex a-center">
                    <image :src="$imgUrls(item.talentInfo.talent_head_img)" mode="aspectFill" class="talent_head_img"></image>
                    <text class="talent_nickname ellipsis">{{ item.talentInfo.talent_nickname }}</text>
                </view>
            </view>
        </scroll-view>
        <scroll-view scroll-x="true" class="scrollView nowrap" v-if="pageData.type == 3">
            <view class="List" v-for="(item, index) in listData" :key="index">
                <view class="chanBOX">
                    <channel-live class="channelVideo" v-if="item.live_state == 1" :feed-id="item.export_id" :promoterShareLink="item.promoter_share_link" object-fit="cover"></channel-live>
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="channelVideo" v-else></image>
                </view>
                <view class="contents">{{ item.description }}</view>
                <view class="priceBox d-flex a-center">
                    <image :src="$imgUrls(item.talentInfo.talent_head_img)" mode="aspectFill" class="talent_head_img"></image>
                    <text class="talent_nickname ellipsis">{{ item.talentInfo.talent_nickname }}</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    // pageData.type 1、短视频  2、直播  3、预约直播 4、达人
    export default {
        props: ['pageData'],
        data() {
            return {
                listData: []
            };
        },
        mounted() {
            this.getBlockInfo();
        },
        methods: {
            async getBlockInfo() {
                const result = await this.$getBlockInfo(this.pageData.list);
                const resultList = result.list || [];
                this.listData = resultList;
            },
            toMore() {
                if (this.pageData.type == 1) return this.toUrl(`/weiDian/videoPlus`);
                if (this.pageData.type == 2) return this.toUrl(`/weiDian/liveStrea`);
                if (this.pageData.type == 3) return this.toUrl(`/weiDian/Livereser`);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .WrapperBox {
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
    }
    .scrollView {
        width: 100%;
        margin-top: 30rpx;
        .List {
            width: 310rpx;
            padding-bottom: 20rpx;
            display: inline-block;
            background-color: #fff;
            border-radius: 20rpx;

            margin-right: 10rpx;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 0rpx 10rpx 0;
            overflow: hidden;
            // box-shadow: rgba(149, 157, 165, 0.2) 0 8rpx 24rpx;
            .chanBOX {
                width: 310rpx;
                height: 400rpx;
                overflow: hidden;
            }
            .channelVideo {
                width: 100%;
                height: 100%;
                // width: 310rpx;
                // height: 400rpx;
                // overflow: hidden;
            }
            .contents {
                width: 100%;
                height: 80rpx;
                line-height: 40rpx;
                border-radius: 20rpx 20rpx 0 0;
                white-space: normal !important;
                padding: 0 10rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #000;
                font-size: 26rpx;
                font-weight: 500;
            }
            .priceBox {
                width: 100%;
                margin-top: 20rpx;
                padding: 0 10rpx;
                .talent_head_img {
                    width: 46rpx;
                    height: 46rpx;
                    border-radius: 50%;
                }
                .talent_nickname {
                    flex: 1;
                    font-size: 24rpx;
                    color: #000;
                    margin-left: 10rpx;
                    white-space: normal !important;
                }
                // font-family: cursive;
            }
        }
        .List:last-child {
            margin-right: 0 !important;
        }
    }
</style>
